<template>
  <div class="text-xl">
    <h2 class="text-cente">
      欢迎123
    </h2>
    <div class="container">
      <Button @btnClick="decrement">-</Button>
      <p>
        <b>{{ state.count }}</b>
      </p>
      <Button @btnClick="increment">+</Button>
    </div>
  </div>
  <p v-if="state.action" class="action text-center">
    {{ state.action }}
  </p>
</template>

<style>
.container {
  min-width: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 47px;
}
.text-center {
  text-align: center;
}
.action {
  color: #470;
  font-weight: bold;
}
</style>

<script setup lang="ts">
import "~style.css"
import { reactive } from "vue"
import type { App } from "vue"
// @ts-ignore
import Button from "~components/Button.vue"

const state = reactive({ count: 0, action: null })

function increment() {
  state.count++
  state.action = "increment"
}

function decrement() {
  state.count--
  state.action = "decrement"
}

function clickHello() {
  state.count++;
}

// (250608) vue `defineOptions` 不能定义方法吧？
// 这个`prepare`是 plasmo 中定义的么？
defineOptions({
  prepare(app: App) {
    // Use any plugins here:
    // app.use
  }
})
</script>
